<template>
  <div>
    <div class="top">
      <div class="top_head">
        <div class="left">
          <img
            :src="touxiang"
            alt=""
            style="
              width: 0.9rem;
              height: 0.9rem;
              background: blue;
              border-radius: 0.45rem;
            "
          />
        </div>
        <div class="right" @click="showPopup">
          <div class="right_in">
            <h3>{{ name }}</h3>
            <p v-if="flag">></p>
            <p v-if="!flag" @click="fun()">x</p>
          </div>
        </div>
      </div>
      <van-popup v-model="show" v-if="flag">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username1"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password1"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              style="background: red; border-color: red"
              >登录/注册</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </div>
    <!-- 宫格 -->
    <div class="grid">
           
      <van-grid :column-num="3" square>
        <van-grid-item icon="label-o" text="我的订单" @click="btn()" />        
        <van-grid-item icon="bill-o" text="优惠券" @click="btn()" />        
        <van-grid-item icon="goods-collect-o" text="礼品卡" @click="btn()" />      
      </van-grid>
           
      <van-grid :column-num="3" square>
        <van-grid-item icon="location-o" text="我的收藏" @click="btn()" />        
        <van-grid-item icon="flag-o" text="我的足迹" @click="btn()" />        
        <van-grid-item icon="user-o" text="会员福利" @click="btn()" />      
      </van-grid>
           
      <van-grid :column-num="3" square>
        <van-grid-item icon="aim" text="地址管理" @click="btn()" />        
        <van-grid-item icon="warn-o" text="账号安全" @click="btn()" />        
        <van-grid-item icon="service-o" text="联系客服" @click="btn()" />      
      </van-grid>
           
      <van-grid :column-num="3" square>
        <van-grid-item icon="question-o" text="帮助中心" @click="btn()" />        
        <van-grid-item icon="smile-o" text="意见反馈" @click="btn()" />      
      </van-grid>
         
    </div>
  </div>
</template>

<script>
import { GetLoginData } from "@/request/api";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      //控制登录框显示隐藏
      flag: "true",
      name: "点击登录",
      touxiang: "https://img01.yzcdn.cn/vant/cat.jpeg",
      show: false,
      username1: "",
      password1: "",
      // userInfo: "",
    };
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      this.name = localStorage.getItem("username");
      this.touxiang = localStorage.getItem("avatar");
      this.flag = !this.flag;
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onSubmit(values) {
      GetLoginData({ username: values["用户名"], pwd: values["密码"] }).then(
        (res) => {
          Toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 500,
          });
          setTimeout(() => {
            this.name = res.data.userInfo.username;
            this.touxiang = res.data.userInfo.avatar;
            this.flag = !this.flag;
          }, 1000);
          if (res.errno == 0) {
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("username", res.data.userInfo.username);
            localStorage.setItem("avatar", res.data.userInfo.avatar);
            this.show = false;
          }
          // this.userInfo = res.data.userInfo
        }
      );
    },
  // 退出登录
    fun() {
      // console.log('111');
      Dialog.confirm({
        title: "登出账号确认",
        message: "您是否想要退出当前账号",
      })
        .then(() => {
          localStorage.removeItem("token");
          location.href = "/my";
        })
        .catch(() => {
          // on cancel
        });
    },
  // 未开发功能
    btn(){
      Toast('该功能未开发');
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="less" scoped>
.top_head {
  width: 100%;
  height: 1.1rem;
  background-color: #000;
  display: flex;
  .left {
    width: 30%;
    height: 1.1rem;
    // background-color:red;
    img {
      margin-top: 0.1rem;
      margin-left: 0.1rem;
    }
  }
  .right {
    width: 70%;
    height: 1.1rem;
    // background-color:green;
    .right_in {
      width: 100%;
      height: 0.3rem;
      // background-color:pink;
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.08rem;
      box-sizing: border-box;
      h3 {
        color: white;
      }
      p {
        color: white;
      }
    }
  }
}
// 登录表单
.van-form {
  .van-cell {
    background-color: #fff;
    width: 3rem;
    height: 0.8rem;
  }
}
</style>
